<template>
	<n-modal :show="accountStore.accountShow && accountStore.accountShow !== AccountShowType.none">
		<div
			class="flex rounded bg-bg-1 overflow-hidden text-t-1"
			:class="isDesktop ? 'w-[800px] h-[632px]' : 'mobile-popup'"
			style="box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25)">
			<div
				class="max-md:hidden flex-1 flex flex-col items-center"
				style="background: linear-gradient(180deg, #5626bf 0%, #7864ff 100%)">
				<img class="mt-[145px]" src="@/assets/img/account/bg.svg" alt="" />
				<img class="w-[191px] mt-[163px]" src="@/assets/img/logo-white-io.svg" alt="" />
			</div>
			<div class="flex-1 flex flex-col relative">
				<n-scrollbar>
					<component :is="component" />
				</n-scrollbar>
			</div>
		</div>
	</n-modal>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { NModal, NScrollbar } from 'naive-ui'
import { useAccountStore } from '@/store'
import { AccountShowType } from '@/types'
import WelcomeVue from '../welcome/index.vue'
import RegionVue from '../region/index.vue'
import LoginVerify from '../login-verify/index.vue'
import ForgotPassword from '../forgot-password/index.vue'
import ForgotPasswordNext from '../forgot-password-next/index.vue'
import ResetPassword from '../reset-password/index.vue'
import ThirdRegister from '../third-register/index.vue'
import { isDesktop } from '@/hooks'

defineOptions({ name: 'ViewsAccountAccount' })

const accountStore = useAccountStore()
const component = computed(() => {
	switch (accountStore.accountShow) {
		case AccountShowType.region:
			return RegionVue
		case AccountShowType.loginVerify:
			return LoginVerify
		case AccountShowType.forgotPassword:
			return ForgotPassword
		case AccountShowType.forgotPasswordNext:
			return ForgotPasswordNext
		case AccountShowType.resetPassword:
			return ResetPassword
		case AccountShowType.thirdRegister:
			return ThirdRegister
		default:
			return WelcomeVue
	}
})
</script>
